<template>
  <div class="selfHeath">
    <!-- 顶部导航开始 -->
    <van-nav-bar
      title="个人健康信息"
      left-text="返回"
      left-arrow
      @click="retur"
    > 
    </van-nav-bar>
    <!-- 顶部导航结束 -->
    <hr />
    <p class="pro">基础信息<span class="texts">*用于计算BMI标准范围</span></p>
    <div class="brithday">
      <van-cell title="生日：" :value="date" @click="show = true" min-date="1970-1-1" />
      <van-calendar v-model="show" @confirm="onConfirm" />
    </div>
    <div class="height">
      <van-field
        readonly
        clickable
        label="身高："
        :value="value"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <div>
      <van-cell-group>
  <van-field v-model="value1" label="体重："  />
</van-cell-group>
    </div>
    <div class="professional">
      <p class="pro">
        职业<span class="texts">*用于推荐同类人群的饮食习惯</span>
      </p>
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1" shape="square">全职主妇</van-radio>
        <van-radio name="2" shape="square">学生</van-radio>
        <van-radio name="3" shape="square">私企员工</van-radio>
        <van-radio name="4" shape="square">国企员工</van-radio>
        <van-radio name="5" shape="square">教师</van-radio>
        <van-radio name="6" shape="square">医生</van-radio>
        <van-radio name="7" shape="square">公务员</van-radio>
        <van-radio name="8" shape="square">IT/互联网</van-radio>
        <van-radio name="9" shape="square">营养师</van-radio>
        <van-radio name="0" shape="square">职业厨师</van-radio>
        <van-radio name="11" shape="square">律师</van-radio>
        <van-radio name="12" shape="square">会计</van-radio>
        <van-radio name="13" shape="square">翻译</van-radio>
        <van-radio name="14" shape="square">音乐人</van-radio>
        <van-radio name="15" shape="square">演员</van-radio>
        <van-radio name="16" shape="square">其他</van-radio>
      </van-radio-group>
    </div>
    <p class="pro">收入</p>
    <van-radio-group v-model="radios" direction="horizontal">
      <van-radio name="a1" shape="square">2000以下</van-radio>
      <van-radio name="a2" shape="square">1000-2000</van-radio>
      <van-radio name="a3" shape="square">3000-4000</van-radio>
      <van-radio name="a4" shape="square">5000-10000</van-radio>
      <van-radio name="a5" shape="square">3000以下</van-radio>
      <van-radio name="a6" shape="square">其他</van-radio>
    </van-radio-group>
    <van-button size="large" type="primary" to=""
      >开始规划一家人的膳食</van-button
    >
    <div style="height: 20rem"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 单选框
      radio: "1",
      radios: "1",
      // 单选框结束
      // text: "",
      //日历选择开始
      date: "",
      show: false,
      value1:"",
      //日历选择结束

      value: "",
      showPicker: false,
      columns: [155, 160, 165, 170, 175, 180, 185, 190],
    };
  },
  methods: {
    retur() {
      this.$router.push("/HealthManagement");
    },
    formatDate(date) {
      return `${date.getYear()}年 ${date.getMonth() + 1}月${date.getDate()} 日`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>

<style>
.pro {
  text-align: left;
  color: black;
  font-size: 16px;
}
.brithday {
  border: 1px solid rgb(236, 234, 234);
  font-size: 14px;
}
.height {
  border: 1px solid rgb(236, 234, 234);
  font-size: 14px;
}
.heavy {
  border: 1px solid rgb(236, 234, 234);
  font-size: 14px;
}
.n1 {
  color: black;
  font-size: 22px;
  margin-bottom: 1px;
}
.professional {
  padding-top: 5px;
}
.pro {
  margin-top: 10px;
  margin-bottom: 10px;
}
.van-radio-group span {
  margin: 10px 10px 10px 10px;
}
.texts {
  font-size: 10px;
  color: rgb(168, 164, 164);
}
</style>
